<!-- 沟通记录页面 -->
<template>
  <div style="width: 100%;overflow: hidden;">
    <div style="width: 100%;position: fixed;top: 0;left: 0;z-index: 99;">
      <!-- 引入公共头部组件 -->
      <HeaderMenu
        title="沟通记录"
        rightText="新建"
        leftText="返回"
        @rightEvent="onClickRight"
      />
      <!-- left-text="返回"
      @click-left="onClickLeft" -->
      <!-- <van-search
        id="searchInput"
        placeholder="请输入关键字"
        @search="search"
        v-model="queryParam.Conditions[0].Keyword"
        @clear="clear"
      /> -->
      <!-- 吸顶布局 -->
      <van-sticky>
        <!-- 搜索区域 -->
        <van-search
          shape="round"
          background="#509DF7"
          show-action
          id="searchInput"
          placeholder="请输入关键字"
          @search="search"
          v-model="queryParam.Conditions[0].Keyword"
          @clear="clear"
        >
          <div slot="action" @click="onSearch" style="color:#fff">搜索</div>
        </van-search>
      </van-sticky>
    </div>

    <div style="width: 100%;padding-top: 100px;padding-bottom: 50px;">
      <!--   -->
      <van-list
        :immediate-check="false"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoading"
      >
        <van-cell-group v-for="item in list" :key="item.Id">
          <van-cell
            :title="item.DailyRecordTitle"
            :value="
              item.DailyRecordDate
                ? item.DailyRecordDate.substring(0, 10)
                : item.DailyRecordDate
            "
          />

          <van-cell :title="item.CustomerName">
            <template #label>
              <span class="content" v-html="item.DailyRecord"></span>
              <van-tag style="letter-spacing: 5px" type="primary">{{
                item.SNameList
              }}</van-tag>
              <div v-if="CreatorId == item.CreatorId" class="submitButtonRecod">
                <van-button
                  size="mini"
                  @click="showClick(item.SharerNameList, item.Id)"
                  style="margin-top: 12px;"
                  type="primary"
                  >抄送</van-button
                >
                <van-button
                  size="mini"
                  @click.stop="edit(item)"
                  style="margin-top: 12px;"
                  type="info"
                  >编辑</van-button
                >
                <van-button
                  size="mini"
                  style="margin-top: 12px;"
                  @click.stop="deli(item)"
                  plain
                  type="primary"
                  ><span style="color:#000"> 查看</span></van-button
                >
              </div>
              <div v-else class="submitButtonRecod">
                <van-button
                  size="mini"
                  @click="deli(item)"
                  style="margin-top: 12px;"
                  plain
                  type="primary"
                  ><span style="color:#000"> 查看</span></van-button
                >
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>

    <van-popup
      class="popup"
      :close-on-click-overlay="true"
      position="bottom"
      :style="{ height: '50%', width: '100%' }"
      v-model="show"
    >
      <div class="confirmBtn">
        <van-button
        round
          size="mini"
          class="comBtn"
          @click="show = false"
          type="danger"
          >取消</van-button
        >
        <van-button round size="mini" class="comBtn" @click="confrim" type="info"
          >确认</van-button
        >
      </div>
      <div style="width: 100%;height: calc(100% - 50px);overflow-y: auto;">
        <van-list
          :immediate-check="false"
          v-model="userloading"
          :finished="userfinished"
          finished-text="没有更多了"
          @load="useronLoad"
        >
          <van-cell
            v-for="item in data"
            :key="item.Id"
            :title="item.RealName"
            @click="cellItem(item)"
            :style="{ background: item.checked ? '#cdcdcd' : '#fff' }"
          />
        </van-list>
      </div>
    </van-popup>
    <!-- <EditForm :readonly="readonly" :parentObj="this" ref="editForm" /> -->
    <!-- <AddForm :parentObj="this" ref="addForm" /> -->
  </div>
</template>

<script>
// import EditForm from "./EditForm";
// import AddForm from "./AddForm.vue";

import { Card, Popup } from "vant";

import {
  Search,
  NavBar,
  Pagination,
  Divider,
  Icon,
  List,
  Cell,
  CellGroup,
  Tag,
  Checkbox,
  CheckboxGroup,
  Field,
  Picker,
  Toast,
  Sticky
} from "vant";
// import Edit from "./Edit.vue";
// import PaginationCom from "../../components/PaginationCom.vue";
// 引入公共头部组件
import HeaderMenu from "../../components/VolHeaderMenu.vue";
import PaginationCom from "../../components/PaginationCom.vue";
export default {
  components: {
    "van-picker": Picker,
    "van-checkbox-group": CheckboxGroup,
    "van-checkbox": Checkbox,
    "van-popup": Popup,
    "van-list": List,
    "van-tag": Tag,
    "van-cell-group": CellGroup,
    "van-icon": Icon,
    "van-cell": Cell,
    "van-divider": Divider,
    "van-pagination": Pagination,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search,
    "van-field": Field,
    "van-sticky": Sticky,
    HeaderMenu
    // EditForm
    // AddForm
  },
  data() {
    return {
      userloading: false,
      userfinished: false,
      userPageRows: 99999,
      userPageIndex: 1,
      pagination: {
        current: 1,
        pageSize: 5,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      CreatorId: "",
      value: "",
      result: [],
      readonly: false,
      Id: "",
      show: false,
      Total: 0,
      Keyword: "",
      list: [],
      data: [],
      loading: false,
      finished: false,
      // 列表传递参数
      queryParam: {
        sDate: "",
        dDate: "",
        Conditions: [
          {
            condition: "DRKeyWord",
            keyword: ""
          }
        ]
      },
      ids: [],
      arr: []
    };
  },
  created() {
    // 获取沟通记录列表数据
    this.getDataList();
    this.http.post("/Base_Manage/Home/GetOperatorInfo").then(resJson => {
      this.info = resJson.Data.UserInfo;
      this.CreatorId = this.info.Id;
      console.log(this.CreatorId);
    });
    let input = document.querySelector(".van-search");

    // if (input.offsetTop <= 0) {
    //   this.height = 46 + "px";
    //   // console.log(this.height);
    // }

    this.getUserData();
  },
  // onLoad() {
  //   window.console.log(1);
  //     this.pagination.pageSize += 3;

  //     this.getDataList();
  // },
  methods: {
    // 列表加载
    onLoading() {
      this.pagination.pageSize += 3;
      this.getDataList();
    },

    useronLoad() {
      this.userPageIndex++;
      this.getUserData();
    },
    // 新建沟通记录
    onClickRight() {
      console.log("新建沟通记录");
      this.$router.push({
        path: "/Communication/addForm",
        query: { readonly: 0, urlType: 0 }
      });
      // this.$refs.addForm.openForm();
    },
    deli(item) {
      console.log(item);
      sessionStorage.removeItem("item");
      sessionStorage.setItem("item", JSON.stringify(item));
      // return;
      this.readonly = true;
      this.$router.push({
        path: "/Communication/EditForm",
        query: {
          readonly: 2,
          Id: item.Id
        }
      });

      // this.$refs.editForm.openForm(item);
    },
    //编辑
    edit(item) {
      sessionStorage.removeItem("item");
      sessionStorage.setItem("item", JSON.stringify(item));
      this.readonly = false;
      this.$router.push({
        path: "/Communication/EditForm",
        query: {
          item: item,
          readonly: 1,
          Id: item.Id
        }
      });
      // this.$refs.editForm.openForm(item);
    },
    cellItem(item) {
      this.$set(item, "checked", !item.checked);
      console.log(item.checked);
    },
    onConfirm(value, index) {
      // Toast(`当前值：${value}, 当前索引：${index}`);
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      console.log("取消");
    },

    showClick(SharerNameList, Id) {
      this.show = true;

      this.Id = Id;
      console.log(this.Id);
      this.data.forEach(item => {
        this.$set(item, "checked", false);
        let idx = SharerNameList
          ? SharerNameList.findIndex(im => im == item.RealName)
          : -1;
        if (idx !== -1) {
          this.$set(item, "checked", true);
        }
      });
    },
    getUserData(arr) {
      this.http
        .post("/Base_Manage/Base_User/GetDataList", {
          PageIndex: this.userPageIndex,
          PageRows: this.userPageRows,
          SortField: "CreateTime",
          SortType: "desc",
          Search: {}
        })
        .then(resJson => {
          console.log(
            "获取沟通列表数据获取沟通列表数据获取沟通列表数据",
            resJson
          );
          // this.data = resJson.Data;
          resJson.Data.forEach(item => {
            this.data.push(item);
          });
          if (arr) {
            if (arr.length > 0) {
              resJson.Data.forEach(item => {
                arr.forEach(val => {
                  if (item.Id === val) {
                    this.$set(item, "checked", true);
                  }
                });
              });
            }
          }
          this.userloading = false;
          if (this.data.length >= resJson.Total) {
            this.userfinished = true;
          } else {
            this.userfinished = false;
          }
        });
    },
    // 返回到上一页
    onClickLeft() {
      // this.$router.go(-1);
    },

    //弹出页面
    Edit(item) {
      console.log(item);
      this.$router.push({
        path: "/myoption",
        query: { cCusName: item.cCusName, cCusCode: item.cCusCode }
      });
    },
    // 按钮索索
    onSearch() {
      // this.getDataList();
      this.search();
    },
    //搜索
    search(value) {
      // 页数重置
      this.pagination.current = 1;
      // 列表数据清空
      this.list = [];
      // this.pagination.showTotal = 0
      // 重置化没有加载完成。重新加载
      this.finished = false;
      // 是否显示页面加载
      this.loading = true;
      // 关闭检索提示
      // this.isSearchFormal = false;
      // 开始初始化onloading函数
      // this.immediateCheck = true;
      this.getDataList();
    },
    clear() {
      // this.queryParam = [{ condition: "DRKeyWord" }];
      // 清空搜索框的内容。从新调用接口
      this.queryParam.Conditions[0].keyword = "";
      // 清空列表数据
      this.list = [];
      // 页数初始化
      this.pagination.current = 1;
      // 重新提示加载状态
      this.loading = true;
      // 重置化没有加载完成。重新加载
      this.finished = false;
      this.getDataList();
    },

    confrim() {
      let idsArr = this.data
        .filter(item => item.checked == true)
        .map(item => item.Id);
      console.log(idsArr);
      this.http
        .post("/CustomerManagement/SalesmanDailyRecord/UpdateDataByCondition", {
          Conditions: [
            {
              Condition: "SharerIds",
              Keyword: idsArr.join("|")
            }
          ],
          ids: [this.Id]
        })
        .then(res => {
          if (res.Success) {
            this.getDataList();
            Toast.success("抄送成功");
            this.list = [];
            this.loading = true;
            this.finished = false;
            this.getDataList();
            this.show = false;
          } else {
            Toast.error("");
          }
        });
    },
    // 获取沟通记录列表
    getDataList() {
      this.http
        .post(
          "/CustomerManagement/SalesmanDailyRecord/GetDataListByMySelfAndMoreCondition",
          {
            PageIndex: this.pagination.current,
            PageRows: this.pagination.pageSize,
            SortField: "DailyRecordDate",
            SortType: "desc",
            Search: this.queryParam
          }
        )
        .then(res => {
          console.log(
            "获取沟通记录列表获取沟通记录列表获取沟通记录列表获取沟通记录列表",
            res
          );
          if (res.Success) {
            this.list = res.Data;
            console.log(this.list);
            if (this.list) {
              this.list.forEach(item => {
                item.SNameList = item.SharerNameList
                  ? item.SharerNameList.join("|")
                  : "";
              });
            }
            // this.list.SharerNameList.join("|");
            this.pagination.total = res.Total;
            this.loading = false;
            if (this.list.length >= res.Total) {
              // 数据全部加载完成
              this.finished = true;
              this.loading = true;
            } else {
              // 数据没有全部加载完成
              this.finished = false;
              this.loading = false;
            }
          }
        });
    }
  },
  // 监听路由
  watch: {
    $route(a,b) {
      this.getDataList();
    }
  }
};
</script>

<style scoped>
/* 覆盖van-button的默认样式 */
.van-button {
  padding: 0 10px 0 10px !important;
}
.popup {
  border-radius: 20px 20px 0 0;
}
.comBtn {
  border-radius: 2px;
  margin-top: 5px;
}
.submitButtonRecod {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.confirmBtn {
  /* position: fixed;
  top: 50%; */
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  line-height: 2;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 100;
  border-radius: 20px 20px 0 0;
}
</style>
